import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import {
    Message
} from 'element-ui';


//获取原型对象上的push函数
const originalPush = VueRouter.prototype.push
//重写原型对象中的push方法
VueRouter.prototype.push = function push(location) {
    // 调用原来的push函数，并捕获异常  call（显示改变this指向  js中this指向）
    return originalPush.call(this, location).catch(err => err)
}

// 模块化： ES6  commonjs

// 配置路由匹配规则
const routes = [{
    path: "/login",
    component: () => import("../views/login/index.vue")
}, {
    path: "/",
    name: "index",
    component: () => import("../views/index/index.vue"),
    children: [{
            path: "home",
            meta: {
                title: "welcome"
            },
            component: () => import("../views/home/index.vue")
        },
        // { //二级路由 ‘/’ 可以不写
        //     path: "menu",
        //     meta: {
        //       title: "菜单管理"
        //     },
        //     component: () => import("../views/menu/index.vue")
        //   },
        //   {
        //     path: "role",
        //     meta: {
        //       title: "角色管理"
        //     },
        //     component: () => import("../views/role/index.vue")
        //   },
        //   {
        //     path: "user",
        //     meta: {
        //       title: "管理员管理"
        //     },
        //     component: () => import("../views/user/index.vue")
        //   }, {
        //     path: "category",
        //     meta: {
        //       title: "分类管理"
        //     }, 
        //     component: () => import("../views/category/index.vue")
        //   }, {
        //     path: "specs",
        //     meta: {
        //       title: "规格管理"
        //     },
        //     component: () => import("../views/specs/index.vue")
        //   }, {
        //     path: "goods",
        //     meta: {
        //       title: "商品管理"
        //     },
        //     component: () => import("../views/goods/index.vue")
        //   },
        {
            path: "/",
            redirect: "home" //当访问根路径的时候定向到home页面
        }
    ]
}]

// 获取路由实例
const router = new VueRouter({
    // 路由模式
    mode: "hash",
    // mode: "history",
    // 路由规则
    routes
})


// 根据用户的权限动态生成路由
let userInfo = localStorage.getItem('userInfo') || ""
if (userInfo !== "") {
    let {
        menus_url
    } = JSON.parse(userInfo) //获取用户权限地址['/menu','/rule','/role']
    // 循环路由权限地址生成动态路由 {path component}
    menus_url.forEach(item => {
        let rouName = item.split('/') //["","menu"]
        router.addRoute('index', {
            path: rouName[1],
            meta: {
                title: rouName[1],
            },
            component: () => import(`../views/${rouName[1]}/index.vue`)
        })
    })
}




// 导出
export default router


// 检测是否登录
router.beforeEach((to, from, next) => {

    // 1.获取本地缓存中的用户信息
    let userInfo = localStorage.getItem('userInfo') || ""
    // next()
    // 2.检测登录和操作权限
    if (userInfo == "") {
        // 未登录
        to.path == "/login" ? next() : next("/login")
    } else {
        // 获取用户默认权限数据
        let {
            menus_url
        } = JSON.parse(userInfo)


        // 添加默认权限地址
        menus_url = [...menus_url, "/home", "/login", '/']
        // 检测权限 数组查找元素是否存在  findIndex indexOf lastIndexof includes(bool) 
        // console.log(menus_url)
        if (menus_url.includes(to.path)) {
            next() //权限检测ok 放行
        } else {
            Message({
                message: '非法访问，请回！',
                type: 'warning'
            });
            next('/') //定向到后台首页
        }
    }
})